<template>
  <div class="dynamicMore">
    <van-nav-bar
      left-arrow
      title="查看更多"
      fixed
      @click-left="$router.go(-1)"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in dynamicList"
          :key="item.id"
          @click="openDetail(item)"
        >
          <div class="dynamic-item-style">
            <img class="item-image-style" v-lazy="item.headImage" :key="item.headImage"/>
            <div class="item-text-style">
              <p class="item-title-style">{{ item.subject }}</p>
              <p class="item-time-style">{{ item.creationDate }}</p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
export default {
  name: "DynamicMore",
  components: {},
  data() {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      dynamicList: [],
      curPage: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.dynamicList = [];
  },
  methods: {
    onRefresh() {
      this.dynamicList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getList();
        this.isLoading = false;
      }, 500);
    },
    getList() {
      api.hot_information_entity_page(this.curPage, this.pageSize).then(res => {
        if (res.code === "0") {
          if (
            (res.datas && res.datas.records.length === 0) ||
            res.datas === null
          ) {
            this.$toast("暂无更多数据");
            this.loading = false;
            this.isLoading = false;
            this.finished = true;
            return;
          }
          this.$nextTick(() => {
            this.loading = false;
            this.isLoading = false;
          });
          this.dynamicList = [...this.dynamicList, ...res.datas.records];
          this.curPage = this.curPage + 1;
          if (res.datas.records.length < this.pageSize) {
            this.finished = true;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    onLoad() {
      this.getList();
    },
    openDetail(val) {
      this.$router.push({
        name: "hotInformationDetails",
        query: { id: val.id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dynamicMore {
  width: 100%;
  height: 100%;
  background: #ffffff;

  .nav-bar-style {
    width: 100%;
    background: #ffffff;
  }
  .dynamic-list-style {
    height: 100%;
    .dynamic-item-style {
      display: flex;
      flex-direction: row;
      // align-items: center;
      .item-image-style {
        flex: 0 0 55px;
        width: 165px;
        height: 50px;
        border-radius: 10%;
      }
      .item-text-style {
        flex: 1;
        padding-left: 10px;
        overflow: hidden;
        p {
          // margin: 0;
          // overflow: hidden;
          word-wrap: break-word;
        }
        .item-title-style {
          font-size: 14px;
          line-height: 20px;
          color: #333333;
        }
        .item-time-style {
          font-size: 12px;
          color: #999999;
          line-height: 16.5px;
        }
      }
    }
  }
}
</style>
